<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="{{ asset('admin/js/jquery-1.9.1.min.js') }}"></script>
    <script src="{{ asset('admin/assets/layer/layer.js') }}" type="text/javascript"></script>
    <script type="text/javascript" src="{{ asset('admin/Widget/Validform/5.3.2/Validform.min.js') }}"></script>
    <title>加入我们</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }
        .join-us{
            padding: 300px 10px 10px;
            background-color: #eeeeee;
            min-height: 100%;
        }
        .form{
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column;
            border-radius: 4px;
        }
        .item{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            padding: 10px;
            width: calc(100% - 40px);
            border-bottom: 1px solid #eee;
        }
        input{
            width: 100%;
            line-height: 40px;
            font-size: 16px;
            padding: 0 10px;
            border: none;
        }
        .get-code{
            position: absolute;
            right: 10px;
            line-height: 40px;
            padding: 0 10px;
            color: white;
            background-color: orange;
            border-radius: 4px;
            display: none;
            width: 90px;
            text-align: center;
            font-size: 14px;
        }
        .get-code.gray{
            background-color: #aaa;
        }
        .submit-button{
            width: 80%;
            margin: 20px;
            background-color: orange;
            color: #fff;
            border-radius: 4px;
            line-height: 48px;
        }
        .tips{
            position: fixed;
            width: 100px;
            background-color: rgba(0,0,0,0.5);
            top: 50%;
            left: 50%;
            color: #fff;
            line-height: 30px;
            text-align: center;
            border-radius: 4px;
            padding: 10px;
            transform: translate(-50%,-50%);
            display: none;
        }
        .show{
            display: block;
        }
    </style>
</head>

<body>
<div class="join-us">
    {!! Form::open(['route' => 'apply.save', 'method' => 'post' ,'id' =>'form']) !!}

        <div class="item">
            <input type="text" name="name" id="name" placeholder="请输入姓名">
        </div>
        <div class="item">
            <input type="text" name="tel" id="tel" placeholder="请输入手机号">
        </div>
        <div class="item">
            <input type="text" name="yzm" id="yzm" placeholder="请输入验证码">
            <div class="get-code show" id="getCode" onclick="countdown(20)">获取验证码</div>
            <div class="get-code gray" id="gotCode" onclick="showTips()"></div>
        </div>
        <input class="submit-button" type="submit" value="立即报名">
    {!! Form::close() !!}
</div>
<div class="tips" id="tips">已经点过了<br>请稍等</div>

<script>
    const getCode = document.getElementById("getCode")
    const gotCode = document.getElementById("gotCode")
    const tips = document.getElementById("tips")

    // 获取验证码
    function countdown(second){

        getCode.className = 'get-code';
        gotCode.className = 'get-code gray show';
        gotCode.innerHTML = second;
        $.ajaxSetup({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
        $.ajax({
            type: "GET",
            url : "{{ route('apply.sendCode') }}",
            data: {
                'name' : $('#name').val(),
                'tel' : $('#tel').val(),
                'yzm' : $('#yzm').val(),
            },
            beforeSend : function () {
                index = layer.load(1, {shade: [0.6, '#393D49']});
            },
            success: function(res, status, xhr) {
                console.log(res);
                if(res.status == 200) {
                    layer.msg(res.msg, {icon: 1});
                    layer.close(index);
                }
            },
            error :function (err,status,xhr) {
                if(err.status == 422) {
                    console.log(err);
                    var json=JSON.parse(err.responseText);
                    if(json.hasOwnProperty("errors")){
                        $.each(json.errors, function(idx, obj) {
                            layer.msg(obj[0], {icon: 5});
                            layer.close(index);
                            return false;
                        });
                    } else {
                        layer.msg(json.msg, {icon: 5});
                        layer.close(index);
                        return false;
                    }

                }
            }
        });
        const countdownSet = setInterval(() => {
            second--
            gotCode.innerHTML = second + '秒再次获取'
            console.log(second)
            if (second <= 0){
                getCode.className = 'get-code show'
                gotCode.className = 'get-code gray'
                clearInterval(countdownSet)

            }
        }, 1000)
    }

    // 已经点过了
    function showTips(){
        tips.className = 'tips show'
        setTimeout(() => {
            tips.className = 'tips'
        },5000)
    }
</script>
<script>
    $('#form').Validform({
        tiptype : 4,
        ajaxPost : true,
        callback : function (res) {
            console.log(res);
            if(res.status === 200) {
                layer.msg(res.msg, {
                    icon: 1,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                    location.href = '{{ route('home.index') }}';
                });
            }
            if(res.status == 422) {
                var json=JSON.parse(res.responseText);
                if(json.hasOwnProperty("errors")){
                    $.each(json.errors, function(idx, obj) {
                        layer.msg(obj[0], {icon: 5});
                        return false;
                    });
                } else {
                    layer.msg(json.msg, {icon: 5});
                    return false;
                }
            }
        },
    });
</script>
</body>

</html>
